// 表格容器
<template>

<div class="table-container"  ref='container'>
    
    <!-- 订单列表 -->
    <div class="content">

        <Table 
        highlight-row
        ref='table'
        @on-row-click='select'
        class="table" 
        :data='currentData' 
        :height='tableH'
        :columns='tableTitle'></Table>
    

    </div>

    <!-- 分页 -->
    <div class="pages" ref='pages'>
        <Page 
        :current='currentPageNo'
        :total='tableData.length' 
        :page-size='rows' 
        @on-change='pageChange'></Page>
    </div>

    
</div>

</template>

<script lang='ts'>
import {Component, Vue, Prop, Watch} from 'vue-property-decorator'
import { pxToRem, deepCopy } from '@/utils/tools' 

@Component({})
export default class tableContainer extends Vue{
    name:string = 'tableContainer'

    // 表格数据
    @Prop()
    tableData:carTableOrder[]

    // 单页显示数据
    get currentData():carTableOrder[]{
        let begin:number = (this.currentPageNo-1) * this.rows;
        let end:number = this.currentPageNo * this.rows;

        return this.tableData.slice(begin, end)
    }


    // 表头
    @Prop()
    tableTitle:tableInf.tableTitle[]

    // 表格高度
    get tableH ():number{
        return this.contentH - 10*2;
    }
    
    // 重布局 
    @Watch('tableData')
    onTableData(newVal, oldVal){
        this.resetLayout()
        this.currentPageNo = 1;
    }
    

    // 上下间隙 (px)
    containerPadding:number = 20

    // 分页高度 (px)
    pagesH:number = 60

    // 内容高度(px)
    contentH:number = 0

    // tableH:number = 50

    //行高 (px)
    rowH:number = 40
    
    // 单页行数
    rows:number = 5

    // 当前页号
    currentPageNo:number = 1

    // 当前选中行号
    currentRowNo:number = -1


    // 获取当前页号
    pageChange (pageNo:number){
        this.currentPageNo = pageNo;
    }

    // 选择编辑项
    select(row, index){
        let currentRowNo = this.currentRowNo;
        let tableEle:any = this.$refs['table'];
        
        // 再次选中同一项, 取消
        if(currentRowNo === index ){

            tableEle.clearCurrentRow()
            this.currentRowNo = -1;
            this.$emit('select', {type:'clear'})
            return
        }
        
        this.currentRowNo = index;        
        this.$emit('select',{type:'update', data: row})
        
    }

    
    // 计算列表高度
    computH (){

         // 容器高度
        let containerEle = <HTMLElement>this.$refs['container'];
        let containerStyle = window.getComputedStyle(containerEle)
        let wH =  <HTMLElement>document.getElementsByTagName('body')[0];

        let containerH = containerStyle.height;

        // 分页高度
        let pagesEle = <HTMLElement>this.$refs['pages'];
        let pagesStyle = window.getComputedStyle(pagesEle);
        let pagesH:number = parseFloat(pagesStyle.height);
        
        this.contentH = parseFloat(containerH) - this.containerPadding * 3 - pagesH;

        let rowEles:NodeList = document.getElementsByClassName('t-row')
        
    }

    // 计算行数
    computRows(){
        this.rows = Math.floor((this.contentH - 10*2)/this.rowH - 1);
        this.rows = this.rows > 0 ? this.rows : 5;
    }

    // 重布局
    resetLayout(){
        
         // 计算表格初始值， 注意计算顺序
        setTimeout(() =>{
            this.computH()
            this.computRows()
        },0)
    }

    mounted (){
        this.resetLayout()
    }

}

</script>

<style lang='scss'>

.table-container{
    overflow: hidden;
    display: grid;
    grid-area: 'content' 'pages';
    grid-template-rows: _rem(20px) auto _rem(20px) _rem(40px) _rem(20px);
    grid-template-columns: repeat(24 1fr);

    margin-right: _rem(10px);
    box-sizing: border-box;
    height: 100%;

    .content{
    overflow-y: auto;
    overflow-x: hidden;

    grid-area: 'content';
    grid-row: 2/3;
    grid-column: 1/24;
    box-sizing: border-box;
    padding: _rem(10px);
    border-radius: $border_radius;
    background: $block_bg_color;
    box-shadow: $default_shadow;

   
    
    }

    .pages{
        
        grid-area: 'pages';
        grid-row: 4/5;
        grid-column: 1/24;
        
    }


    // 自定义表格基础样式
    .t-row{
        box-sizing: border-box;
        height: _rem(40px);
    }

    .ivu-page{
        user-select: none;
    }
    

    .table,
    .tbody,
    .object{
        border: none;
    }

    .ivu-table-row-highlight div{
        color: $font_light_color;
    }

    div.ivu-table::after{
        content: '';
        display: none;
    }
    
    thead{
        overflow: hidden;
        border-radius: _rem(4px);
    }
    td{
        color: #000204;
    }
}




</style>